<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <meta HTTP-EQUIV="pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-store">
    <meta HTTP-EQUIV="expires" CONTENT="0">
    <script src="../js/vue.min.js"></script>

    <script src="../js/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!--    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>-->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        html, body, #app {
            width: 100%;
            height: 100%;
        }

        * {
            margin: 0px;
            padding: 0px;
        }

        .el-header {
            width: 100%;
            background-color: whitesmoke;
            height: 44px;
        }

        el-ul > el-li {
            display: block;

        }

        el-li {
            margin: 0px;
            padding: 0px;
            line-height: 1.3;
            box-sizing: content-box;
            padding-top: 15px;
        }

        .a1:hover {
            background-color: lightgray;
            cursor: pointer;

        }

        .upload {
            cursor: pointer;
        }
        #app{
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }


    </style>
</head>
<body>
<div id="app">
    <el-container style="width: 100%;height: 100%;margin: 0%">
        <el-header>
            <div style="margin-left: 150px;height: 10px">
                <a href="../index.html" style="text-decoration: none;color: black"><img src="../images/ThreeGayslogo.png" style="line-height: 10px">
                <span style="line-height: 10px">ThreeGays</span>
                </a>
            </div>
            <div style="float: right;margin-right: 100px">
                <a href="../shoppingcart.html" style="color: black;padding-right: 50px"><i class="el-icon-shopping-cart-2"></i></a>
                <a href="../shop.html" style="color: black;padding-right: 70px"><i class="el-icon-shopping-bag-1"></i></a>
                <el-link href="../exituser.s" style="border: 0px;cursor: pointer;background-color:  whitesmoke">退出
                </el-link>
            </div>
        </el-header>
        <el-container>
            <el-aside style="margin-left: 15%">
                <el-div>
                    <el-div>
                        <el-upload
                                    name="image"
                                   class="avatar-uploader"
                                   action="../UploadImageServlet.s"
                                   :show-file-list="false"
                                   :on-success="handleAvatarSuccess"
                                   :before-upload="beforeAvatarUpload">
                            <img v-if="images"  :src="'../' + images" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                        <el-span style="display: block;padding-top: 20px;padding-left: 30px">{{username}}</el-span>
                    </el-div>
                    <el-div>
                        <el-ul>
                            <el-li>
                                <el-div @click="person"
                                        style="width: 180px;height:40px;box-sizing: border-box;display: flex;border-radius: 10px"
                                        class="a1">
                                    <i class="el-icon-user" style="padding-left: 20px;line-height: 40px"></i>
                                    <el-span style="line-height: 40px;padding-left: 5px">账号安全</el-span>
                                </el-div>
                            </el-li>
                            <el-li>
                                <el-div @click="person_1"
                                        style="width: 180px;height:40px;box-sizing: border-box;display: flex;border-radius: 10px"
                                        class="a1">
                                    <i class="el-icon-lock" style="padding-left: 20px;line-height: 40px"></i>
                                    <el-span style="line-height: 40px;padding-left: 5px">个人信息</el-span>
                                </el-div>
                            </el-li>
                            <el-li>
                                <el-div @click="person_3"
                                        style="width: 180px;height:40px;box-sizing: border-box;display: flex;border-radius: 10px"
                                        class="a1">
                                    <i class="el-icon-bank-card" style="padding-left: 20px;line-height: 40px"></i>
                                    <el-span style="line-height: 40px;padding-left: 5px">购买记录</el-span>
                                </el-div>
                            </el-li>
                            <el-li>
                                <el-div @click="person_2"
                                        style="width: 180px;height:40px;box-sizing: border-box;display: flex;border-radius: 10px"
                                        class="a1">
                                    <i class="el-icon-bell" style="padding-left: 20px;line-height: 40px"></i>
                                    <el-span style="line-height: 40px;padding-left: 5px">收货地址</el-span>
                                </el-div>
                            </el-li>
                        </el-ul>
                    </el-div>
                </el-div>
            </el-aside>

            <el-main style="margin-left: 2%">
                <div style="margin-right: 10%;margin-top: 50px; display:none" id="p_2">
                    <div>
                        <el-span style="margin-left: 40%;font-size: 30px">个人信息</el-span>
                    </div>
                    <div style="height: 50px;margin-top: 30px">

                    </div>
                    <hr>
                    <div style="margin-top: 30px;">
                        <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign"
                                 style="margin-left: 100px;margin-top: 50px"
                                  status-icon :rules="rules_form" ref="formLabelAlign">
                            <el-form-item label="昵称" prop="username">
                                <el-input v-model="formLabelAlign.username" placeholder="请输入内容"
                                          style="width: 300px;border-radius: 10px" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="邮箱" prop="email">
                                <el-input v-model="formLabelAlign.email" placeholder="请输入邮箱"
                                          style="width: 300px;border-radius: 10px" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="电话号" prop="telphone">
                                <el-input v-model="formLabelAlign.telphone" placeholder="请输入电话号"
                                          style="width: 300px;border-radius: 10px" clearable></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="submitForm_2('formLabelAlign')">保存</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
                <div style="margin-right: 10%;margin-top: 50px; " id="p_1">
                    <div>
                        <el-span style="font-size: 30px">账号与安全</el-span>
                    </div>
                    <div style="height: 50px;margin-top: 30px" id="p_3">
                        <span style="line-height: 50px">账号管理方式</span>
                        <p>您可使用手机号、邮件地址第三方帐号管理华为帐号</p>
                    </div>
                    <div style="margin-top: 50px;height: 50px;display: flex;">
                        <div>
                            <el-collapse>
                                <el-collapse-item title="重置密码" name="1">
                                    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm"
                                             label-width="100px"
                                             class="demo-ruleForm">
                                        <el-form-item label="原密码" prop="password">
                                            <el-input v-model="ruleForm.password" type="password"
                                                      autocomplete="off"></el-input>
                                        </el-form-item>
                                        <el-form-item label="密码" prop="pass">
                                            <el-input type="password" v-model="ruleForm.pass"
                                                      autocomplete="off"></el-input>
                                        </el-form-item>
                                        <el-form-item label="确认密码" prop="checkPass">
                                            <el-input type="password" v-model="ruleForm.checkPass"
                                                      autocomplete="off"></el-input>
                                        </el-form-item>
                                        <el-form-item>
                                            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                                        </el-form-item>
                                    </el-form>
                                </el-collapse-item>
                                <el-collapse-item title="销户" name="2">
                                    <div style="color: red">永久删除您的帐号及相关数据，管理您的注销请求</div>
                                    <div style="margin-top: 50px">
                                        <el-form :model="ruleform" status-icon :rules="rules" ref="ruleform"
                                                 label-width="100px"
                                                 class="demo-ruleForm"
                                        >
                                            <el-form-item label="密码" prop="password_1">
                                                <el-input type="password" placeholder="请输入密码进行验证"
                                                          v-model="ruleform.password_1" autocomplete="off"></el-input>
                                            </el-form-item>
                                            <el-form-item>
                                                <el-button type="primary" @click="submitForm_1('ruleform')">确定
                                                </el-button>
                                            </el-form-item>
                                        </el-form>
                                    </div>

                                </el-collapse-item>
                                <el-collapse-item title="双重验证" name="3">
                                    <span style="color: red">双重验证之后登录是会安全验证</span>
                                    <div style="margin-right: 100px;">
                                        <el-switch
                                                v-model="value1"
                                                active-text="开启"
                                                inactive-text="关闭"
                                                @change="status">
                                        </el-switch>
                                    </div>
                                </el-collapse-item>
                            </el-collapse>
                        </div>
                    </div>
                </div>
                <div style="margin-left:5%;margin-top: 7%; display: none" id="p_4">
                    <div style="margin-left: 5%">
                        <span style="font-size: 20px;color: black">添加收货地址</span>
                        <form style="padding-top: 30px">
                       收货人姓名:
                        <input type="text" id="name" v-model="add_username" placeholder="请输入姓名" style="border-radius: 5px;height: 30px;border: 1px solid black">
                        <br>
                        <br>
                      手 &nbsp;&nbsp;机 &nbsp; 号&nbsp;:
                        <input type="text" id="tel" v-model="add_telphone" placeholder="请输入手机号" style="border-radius: 5px;height: 30px;border: 1px solid black">
                        <br>
                        <br>
                        省 &nbsp;&nbsp;份 &nbsp;&nbsp;:<select v-model="add_province" id="province" class='province' msgEmpty="请选择省份" style="border-radius: 5px;height: 30px;border: 1px solid black">
                        <option value="" style="border-radius: 5px;height: 30px;border: 1px solid black">请选择</option>
                    </select>&nbsp;&nbsp;&nbsp;
                        市:<select v-model="add_city" id="city" class='city' msgEmpty="请选择城市" style="border-radius: 5px;height: 30px;border: 1px solid black">
                        <option value="" style="border-radius: 5px;height: 30px;border: 1px solid black">请选择</option>
                    </select>&nbsp;&nbsp;&nbsp;
                        详细地址:<input type="text" id="site"v-model="add_site" placeholder="请填写详细地址" style="border-radius: 5px;height: 30px;border: 1px solid black">
                        <br>
                        <el-button style="margin-left: 30%;font-size: 20px;border: 1px solid white;background-color: white" @click="check">保存</el-button>
                    </form>
                    </div>
                    <div style="margin-top: 20px;margin-right: 10%">
                    <span style="font-size: 20px;color: black;margin-top: 20px;margin-right: 10%">我的地址
                    </span>
                        <div style="margin-right: 20%">
                            <template>
                                <el-table
                                        :data="tableData"
                                        style="width: 100%"
                                        max-height="250">
                                    <el-table-column
                                            prop="name"
                                            label="姓名"
                                            width="120">
                                    </el-table-column>
                                    <el-table-column
                                            prop="telphone"
                                            label="电话号"
                                            width="120">
                                    </el-table-column>
<!--                                    <el-table-column-->
<!--                                            prop="province"-->
<!--                                            label="省份"-->
<!--                                            width="120">-->
<!--                                    </el-table-column>-->
<!--                                    <el-table-column-->
<!--                                            prop="city"-->
<!--                                            label="市区"-->
<!--                                            width="120">-->
<!--                                    </el-table-column>-->
                                    <el-table-column
                                            prop="site"
                                            label="地址"
                                            width="300">
                                    </el-table-column>
                                    <el-table-column
                                            fixed="right"
                                            label="操作"
                                            width="120">
                                        <template slot-scope="scope">
                                            <el-button
                                                    @click.native.prevent="deleteRow(scope.$index,tableData)"
                                                    type="text"
                                                    size="small">
                                                移除
                                            </el-button>
                                            <el-button
                                                    @click.native.prevent="setdefault(scope.$index,tableData)"
                                                    type="text"
                                                    size="small"
                                            >
                                                设为默认
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </template>
                        </div>
                    </div>
                </div>
                <div style="margin-left: 1%;margin-top: 7%;display: none " id="p_5">
                    <template>
                        <el-table
                                ref="filterTable"
                               :data="listData.data"
                                style="width: 100%">
<!--                            <el-table-column prop="image" label="商品图片" width="180">-->
<!--                                　　　　<img  :src="'/PhoneShop_war_exploded/' + items.image" width="40" height="40" class="head_pic"/>-->
<!--                            </el-table-column>-->

                            <el-table-column prop="image">
                                <template slot-scope="scope">
                                    <img :src="path+scope.row.image" style="width: 100px; height: 100px">
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="date"
                                    label="日期"
                                    width="180"
                            >
                            </el-table-column>
                            <el-table-column
                                    prop="product"
                                    label="商品名"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="price"
                                    label="价格"
                                    width="80">
                            </el-table-column>
                            <el-table-column
                                    prop="site"
                                    label="地址"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="status"
                                    label="状态"
                                    width="180">
                            </el-table-column>
                        </el-table>
                    </template>
                    <el-pagination :current-page="currentPage" :page-size="pageSize" @current-change="querylist" @size-change="sizeChange"
                                   style="text-align: center"
                                   background :page-sizes="[5, 10, 20]"
                                   layout="sizes, prev, pager, next"
                                   :total="listData.total">
                    </el-pagination>
                </div>
            </el-main>
        </el-container>
        <el-footer style="margin-bottom: 0px;background-color:  whitesmoke ">
            <div style="height: 50px ">
                <p style="text-align: center;line-height: 50px">三人行账号用户协议</p>
            </div>
        </el-footer>
    </el-container>
</div>

<script>

    Vue.component("el-collapse", {
        template: `
     <div style="border-bottom: 1px #aaa solid">
        <slot></slot>
    </div>,
     `,
        methods: {
            itemOpened(name) {
                //关闭name其他的item
                this.$children.forEach(item => {
                    if (item.name != name) {
                        item.opened = false;
                    }
                })
            }
        }
    });

    Vue.component("el-collapse-item", {
        props: ["title", "name"],
        template: `
     <div :name="name">
     <div style="padding: 10px 0px; border-top:1px #aaa solid; cursor :pointer"
          @click="opened =! opened ; $parent.itemOpened(name)">{{title}} </div>

    <div style="margin: 10px 0px ; overflow: hidden; transition: height 0.5s"
         :style="{height:opened?myheight:'0px'}" ref="item">
         <slot></slot>
        </div>
    </div> `,
        data() {
            return {
                opened: false,
                myheight: '100px'
            }
        },
        mounted() {
            this.myheight = this.$refs.item.scrollHeight + "px";
        }
    })
    var vue = new Vue({
        el: "#app",
        data() {
            var pPattern = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;
            var mPattern = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/;
            var uPattern = /^[a-zA-Z0-9]{3,16}$/;
            var ePattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
            var validatePass1 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入原密码'))
                } else {
                    if (this.ruleForm.password != this.pwd) {
                        callback(new Error('与原密码不一致!'));
                    } else {
                        callback();
                    }
                }
            };
            var validatePass5=(rule,value,callback)=> {
                if (value === '') {
                    callback(new Error('请输入手机号码'));
                } else {
                    if (mPattern.test(value) == false) {
                        new callback(new Error("请输入正确的手机号码"));
                    } else {
                        callback();
                    }
                }

            };
            var validatePass4=(rule,value,callback)=> {
                if (value === '') {
                    callback(new Error('请输入用户名'));
                } else {
                    if (uPattern.test(value) == false) {
                        new callback(new Error("3到16位(字母，数字)"));
                    }else {
                        callback();
                    }
                }

            };
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else{
                    if (pPattern.test(value)==false){
                        new callback(new Error("密码最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符"))
                    }else {
                        if (this.ruleForm.checkPass !== '') {
                            this.$refs.ruleForm.validateField('checkPass');
                        }
                        callback();
                    }
                }
            };
            var validatePass6 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入邮箱'));
                } else{
                    if (ePattern.test(value)==false){
                        new callback(new Error("请输入正确邮箱"));
                    }else {
                        callback();

                    }
                    }

            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            }
            var validatePass3 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入原密码'))
                } else {
                    if (this.ruleform.password_1 != this.pwd_1) {
                        callback(new Error('与原密码不一致!'));
                    } else {
                        callback();
                    }
                }
            }
            return {
                url: '../images/back-header.jpg',
                fit: 'fill',
                username: '',
                input: '',
                labelPosition: 'right',
                input_pwd: '',
                passType: "password",
                icon: "el-icon-search",
                pwd: '',
                pwd_1: '',
                value1: false,
                flag: false,
                add_telphone:'',
                add_username:'',
                add_province:'',
                add_city:'',
                add_site:'',
                image:'',
                pic:'',
                images:'',
                currentPage : 1,
                pageSize: 5,
                ruleForm: {
                    pass: '',
                    checkPass: '',
                    password: '',
                },
                ruleform: {
                    password_1: ''
                },
                rules: {
                    password: [
                        {validator: validatePass1, trigger: 'blur'}
                    ],
                    pass: [
                        {validator: validatePass, trigger: 'blur'}
                    ],
                    checkPass: [
                        {validator: validatePass2, trigger: 'blur'}
                    ],
                    password_1: [
                        {validator: validatePass3, trigger: 'blur'}
                    ]
                },
                formLabelAlign: {
                    username: '',
                    telphone: '',
                    email: '',
                    pass: ''
                },
                rules_form:{
                    username:[
                        { validator: validatePass4, trigger: 'blur'}
                    ],
                    telphone:[
                        { validator: validatePass5, trigger: 'blur'}
                    ],
                    email:[
                        { validator: validatePass6, trigger: 'blur'}
                    ],
                    pass:[
                        { validator: validatePass, trigger: 'blur'}
                    ]
                },
                tableData: [
                ],
                listData: [],
                path: location.pathname.substring(0,location.pathname.indexOf("/",2) ),
                dialogFormVisible: false,
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                formLabelWidth: '120px'

            }
        },

        methods: {
            sizeChange(size) {
                this.pageSize = size;
                this.querylist(1);
            },
            handleselectionchange() {
            },
            deleteRow(index, rows) {
                axios({
                    url: "../del_address.s",
                    params: {
                        name: this.tableData[index].name,
                        telphone: this.tableData[index].telphone,
                        site: this.tableData[index].site,
                    }
                }).then(res => {
                    this.$message(res.data.msg);
                    rows.splice(index, 1);

                })
            },
            setdefault(index,rows){
                console.log(index);
                console.log(rows);
                console.log();
                axios({
                    url:"../setdafault.s",
                    params:{
                        site:this.tableData[index].site,
                        name: this.tableData[index].name,
                        telphone: this.tableData[index].telphone,
                    }
                }).then(res=>{
                    this.$message(res.data.msg);

                })
            },
            status() {
                if (this.value1 == true) {
                    axios({
                        url: "../testServlet.s",
                        params: {
                            status: true
                        }
                    }).then(res => {
                        console.log(res.data.data.value);
                    })
                } else {
                    axios({
                        url: "../testServlet.s",
                        params: {
                            status: false
                        }
                    }).then(res => {
                        console.log(res.data.data.value);
                    })
                }

            },
            person() {
                var elementById_1 = document.getElementById("p_1");
                var elementById_2 = document.getElementById("p_2");
                var elementById_3 = document.getElementById("p_4");
                var elementById_4 = document.getElementById("p_5");
                elementById_4.style.display = "none";
                elementById_1.style.display = "block";
                elementById_2.style.display = "none";
                elementById_3.style.display = "none";

            },
            person_1() {
                var elementById_1 = document.getElementById("p_1");
                var elementById_2 = document.getElementById("p_2");
                var elementById_3 = document.getElementById("p_4");
                var elementById_4 = document.getElementById("p_5");
                elementById_4.style.display = "none";
                elementById_1.style.display = "none";
                elementById_2.style.display = "block";
                elementById_3.style.display = "none";

            },
            person_2() {
                var elementById_1 = document.getElementById("p_1");
                var elementById_2 = document.getElementById("p_2");
                var elementById_3 = document.getElementById("p_4");
                var elementById_4 = document.getElementById("p_5");
                elementById_4.style.display = "none";
                elementById_1.style.display = "none";
                elementById_2.style.display = "none";
                elementById_3.style.display = "block";


            },
            person_3() {
                var elementById_1 = document.getElementById("p_1");
                var elementById_2 = document.getElementById("p_2");
                var elementById_3 = document.getElementById("p_4");
                var elementById_4 = document.getElementById("p_5");

                elementById_1.style.display = "none";
                elementById_2.style.display = "none";
                elementById_3.style.display = "none";
                elementById_4.style.display = "block";
            },
            eyes() {
                if (this.passType === "password") {
                    this.icon = "el-icon-view",
                        this.passType = "text"
                } else {
                    this.icon = "el-icon-search",
                        this.passType = "password"
                }
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios({
                            url: "../updatepwd.s",
                            params: {
                                pass: this.ruleForm.pass
                            }
                        }).then(res => {
                            this.$message(res.data.msg);
                            if (res.data.code == 1) {
                                window.location.href = "../index.html";
                            }
                        })
                    } else {
                        this.$message("输入有误");
                        return false;
                    }
                });
            },
            submitForm_1(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios({
                            url: '../deluser.s'
                        }).then(res => {
                            if (res.data.code == 1) {
                                window.location.href = "../index.html"
                            }
                        })
                    } else {
                        this.$message("输入有误");
                        return false;
                    }
                });
            },
            submitForm_2(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios({
                            url: "../saveuser.s",
                            params: {
                                username: this.formLabelAlign.username,
                                telphone: this.formLabelAlign.telphone,
                                email: this.formLabelAlign.email
                            }
                        }).then(res => {
                            this.$message(res.data.msg);
                        })
                    } else {
                        this.$message("输入有误");
                        return false;
                    }
                });
            },
            exit() {
                axios({
                    url: "../exituser.s",
                }).then(res => {
                    if (res.data.code == 1) {
                        window.location.href = "../index.html"
                    }
                })
            },
            handleClick(row) {
                console.log(row);
            },
            queryuseradd() {
                axios({
                    url: "../queryadd.s",
                }).then(res => {
                    this.tableData = res.data.data;
                })
            },
            queryuser() {
                axios({
                    url: "../QueryUser.s"
                }).then(res => {
                    this.formLabelAlign = res.data.data;
                    this.pwd = res.data.data.password;
                    this.username = res.data.data.username;
                    this.pwd_1 = res.data.data.password;
                    this.images=res.data.data.pic;
                });
            },
            check() {
                axios({
                    url: "../address.s",
                    params: {
                        username: this.add_username,
                        telphone: this.add_telphone,
                        province: this.add_province,
                        city: this.add_city,
                        site: this.add_site,
                    }
                }).then(res => {
                    this.$message(res.data.msg);
                    if (res.data.code == 1) {
                        this.queryuseradd();
                        this.add_username = "";
                        this.add_telphone = "";
                        this.add_province = "";
                        this.add_site = "";
                        this.add_city = "";
                    }
                })
            },
            querylist(page){
                axios({
                    url:"../querylist.s",
                    params:{
                        currentPage:page,
                        pageSize: this.pageSize
                    }
                }).then(res=>{
                    this.currentPage=page;
                    this.listData=res.data.data;
                    this.listData.forEach(list=>{
                        if (list.status == 1){
                            list.status = "已付款";
                        }else if (list.status == 2) {
                            list.status = "已发货";
                        }else if (list.status == 3){
                            list.status = "已收货";
                        }else if (list.status == 4){
                            list.status = "已评价";
                        }
                    })
                })
            },
            handleAvatarSuccess(res, file) {
                console.log(res);
                console.log(file)
                this.pic = res.data
                axios({
                    url:"../adduserimage.s",
                    params:{
                        pic:this.pic
                    }
                }).then(result=>{
                    console.log(this.pic);
                    this.$message(result.data.msg);
                    this.pic = result.data;
                })
                this.images=res.data
                console.log(this.pic);
                this.$forceUpdate();
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type.indexOf('image/') > -1;
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 图片 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
        },
        created() {
            this.queryuser();
            this.queryuseradd();
            this.querylist(1);
        }
    })
</script>
<script>
    var pro = ["山东", "天津", "吉林", "黑龙江", "江苏", "福建", "湖北", "湖南", "宁夏", "山西", "辽宁", "四川", "贵州", "云南", "陕西", "甘肃", "青海", "内蒙古", "广西", "西藏", "新疆维吾尔", "北京", "上海", "重庆", "广东", "河北", "浙江", "安徽", "江西", "河南", "海南", "香港", "澳门", "台湾"];

    var city = {
        北京: ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "海淀区", "丰台区", "石景山区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "门头沟区", "密云县", "延庆县"],
        天津: ["和平区", "河东区", "河西区", "南开区", "河北区", "红桥区", "东丽区", "西青区", "北辰区", "津南区", "武清区", "宝坻区", "滨海新区", "静海县", "宁河县", "蓟县"],
        上海: ["黄浦区", "卢湾区", "徐汇区", "长宁区", "静安区", "普陀区", "闸北区", "虹口区", "杨浦区", "闵行区", "宝山区", "嘉定区", "浦东新区", "金山区", "松江区", "青浦区", "奉贤区", "崇明县"],
        重庆: ["渝中区", "大渡口区", "江北区", "南岸区", "北碚区", "渝北区", "巴南区", "长寿区", "双桥区", "沙坪坝区", "万盛区", "万州区", "涪陵区", "黔江区", "永川区", "合川区", "江津区", "九龙坡区", "南川区", "綦江县", "潼南县", "荣昌县", "璧山县", "大足县", "铜梁县", "梁平县", "开县", "忠县", "城口县", "垫江县", "武隆县", "丰都县", "奉节县",
            "云阳县", "巫溪县", "巫山县", "石柱土家族自治县", "秀山土家族苗族自治县", "酉阳土家族苗族自治县", "彭水苗族土家族自治县"
        ],
        河北: ["石家庄", "唐山", "秦皇岛", "邯郸", "邢台", "保定", "张家口", "承德", "沧州", "廊坊", "衡水"],
        山西: ["太原", "大同", "阳泉", "长治", "晋城", "朔州", "晋中", "运城", "忻州", "临汾", "吕梁"],
        辽宁: ["沈阳", "大连", "鞍山", "抚顺", "本溪", "丹东", "锦州", "营口", "阜新", "辽阳", "盘锦", "铁岭", "朝阳", "葫芦岛"],
        吉林: ["长春", "吉林", "四平", "辽源", "通化", "白山", "松原", "白城", "延边朝鲜族自治州"],
        黑龙江: ["哈尔滨", "齐齐哈尔", "鹤岗", "双鸭山", "鸡西", "大庆", "伊春", "牡丹江", "佳木斯", "七台河", "黑河", "绥化", "大兴安岭"],
        江苏: ["南京", "苏州", "无锡", "常州", "镇江", "南通", "泰州", "扬州", "盐城", "连云港", "徐州", "淮安", "宿迁"],
        浙江: ["杭州", "宁波", "温州", "嘉兴", "湖州", "绍兴", "金华", "衢州", "舟山", "台州", "丽水"],
        安徽: ["合肥", "芜湖", "蚌埠", "淮南", "马鞍山", "淮北", "铜陵", "安庆", "黄山", "滁州", "阜阳", "宿州", "巢湖", "六安", "亳州", "池州", "宣城"],
        福建: ["福州", "厦门", "莆田", "三明", "泉州", "漳州", "南平", "龙岩", "宁德"],
        江西: ["南昌", "景德镇", "萍乡", "九江", "新余", "鹰潭", "赣州", "吉安", "宜春", "抚州", "上饶"],
        山东: ["烟台", "日照", "青岛", "淄博", "枣庄", "东营", "潍坊", "济宁", "泰安", "威海", "莱芜", "临沂", "德州", "聊城", "滨州", "菏泽", "济南"],
        河南: ["郑州", "开封", "洛阳", "平顶山", "安阳", "鹤壁", "新乡", "焦作", "濮阳", "许昌", "漯河", "三门峡", "南阳", "商丘", "信阳", "周口", "驻马店"],
        湖北: ["武汉", "黄石", "十堰", "荆州", "宜昌", "襄樊", "鄂州", "荆门", "孝感", "黄冈", "咸宁", "随州", "恩施"],
        湖南: ["长沙", "株洲", "湘潭", "衡阳", "邵阳", "岳阳", "常德", "张家界", "益阳", "郴州", "永州", "怀化", "娄底", "湘西"],
        广东: ["广州", "深圳", "珠海", "汕头", "韶关", "佛山", "江门", "湛江", "茂名", "肇庆", "惠州", "梅州", "汕尾", "河源", "阳江", "清远", "东莞", "中山", "潮州", "揭阳", "云浮"],
        海南: ["海口", "三亚"],
        四川: ["成都", "自贡", "攀枝花", "泸州", "德阳", "绵阳", "广元", "遂宁", "内江", "乐山", "南充", "眉山", "宜宾", "广安", "达州", "雅安", "巴中", "资阳", "阿坝", "甘孜", "凉山"],
        贵州: ["贵阳", "六盘水", "遵义", "安顺", "铜仁", "毕节", "黔西南", "黔东南", "黔南"],
        云南: ["昆明", "曲靖", "玉溪", "保山", "昭通", "丽江", "普洱", "临沧", "德宏", "怒江", "迪庆", "大理", "楚雄", "红河", "文山", "西双版纳"],
        陕西: ["西安", "铜川", "宝鸡", "咸阳", "渭南", "延安", "汉中", "榆林", "安康", "商洛"],
        甘肃: ["兰州", "嘉峪关", "金昌", "白银", "天水", "武威", "酒泉", "张掖", "庆阳", "平凉", "定西", "陇南", "临夏", "甘南"],
        青海: ["西宁", "海东", "海北", "海南", "黄南", "果洛", "玉树", "海西"],
        内蒙古: ["呼和浩特", "包头", "乌海", "赤峰", "通辽", "鄂尔多斯", "呼伦贝尔", "巴彦淖尔", "乌兰察布", "锡林郭勒盟", "兴安盟", "阿拉善盟"],
        广西: ["南宁", "柳州", "桂林", "梧州", "北海", "防城港", "钦州", "贵港", "玉林", "百色", "贺州", "河池", "来宾", "崇左"],
        西藏: ["拉萨", "那曲", "昌都", "林芝", "山南", "日喀则", "阿里"],
        宁夏: ["银川", "石嘴山", "吴忠", "固原", "中卫"],
        新疆维吾尔: ["乌鲁木齐", "克拉玛依", "吐鲁番", "哈密", "和田", "阿克苏", "喀什", "克孜勒苏", "巴音郭楞", "昌吉", "博尔塔拉", "伊犁", "塔城", "阿勒泰"],
        香港: ["香港岛", "九龙东", "九龙西", "新界东", "新界西"],
        澳门: ["澳门半岛", "离岛"],
        台湾: ["台北", "高雄", "基隆", "新竹", "台中", "嘉义", "台南市"]
    };
    $(document).ready(function() {
        for (var i = 0; i < pro.length; i++) {
            $option = $("<option/>");
            $option.attr("value", pro[i]);
            $option.text(pro[i]);
            $(".province").append($option);
        }
        $(".province").change(function() {

            var cities = city[$(this).val()];
            $(".city").empty();
            $(".city").append("<option value=''>请选择</option>");
            for (var i = 0; i < cities.length; i++) {
                $option = $("<option/>");
                $option.attr("value", cities[i]);
                $option.text(cities[i]);
                $(".city").append($option);
            }
        });
    });
</script>
</body>
</html>